<template>
  <div class="app-container">
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      ref="crud"
      v-model="form"
      :page.sync="page"
      @row-del="rowDel"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @search-change="searchChange"
      @search-reset="searchReset"
      @current-change="currentChange"
      @size-change="sizeChange"
      @on-load="onLoad"
    >
      <template
        slot-scope="{type,size,row}"
        slot="menu"
      >
        <el-button
          icon="el-icon-setting"
          :size="size"
          :type="type"
          @click="dictEdit(row)"
        >字典配置</el-button>
      </template>
    </avue-crud>

    <!-- 字典配置 -->
    <el-dialog
      :title="dictTitle"
      :visible.sync="box"
      width="55%"
      @open="onDiaLoad"
    >
      <avue-crud
        :option="diaOption"
        :table-loading="diaLoading"
        :data="diaData"
        ref="crud"
        v-model="diaForm"
        :page.sync="diaPage"
        @row-del="rowDiaDel"
        @row-update="rowDiaUpdate"
        @row-save="rowDiaSave"
        :before-open="beforeOpen"
      >
      </avue-crud>
    </el-dialog>
  </div>
</template>

<script>
import {
  addRule,
  getRule,
  delRule,
  upRule,
  getRField,
  addRField,
  upRField,
  delRField,
} from '@/api/rule.js'

import { getField } from '@/api/user.js'
export default {
  data() {
    return {
      form: {},
      loading: true,
      query: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        code: '',
        total: 0,
      },
      option: {
        searchShow: true,
        searchLabelWidth: '25%',
        searchMenuSpan: 4,
        searchSpan: 6,
        card: true,
        tip: false,
        border: true,
        index: true,
        indexLabel: '序号',
        indexWidth: 100,
        align: 'center',
        menuWidth: 250,
        column: [
          {
            label: '字典编号',
            prop: 'ruleDictCode',
            search: true,
            width: 210,
            rules: [
              {
                required: true,
                message: '请输入字典编号',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '字典名称',
            prop: 'ruleDictName',
            search: true,
            rules: [
              {
                required: true,
                message: '请输入字典名称',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '实体类名',
            prop: 'enType',
            width: 300,
          },
          {
            label: '排序',
            prop: 'ruleDictOrder',
            type: 'number',
            value: 0,
            width: 80,
          },
          {
            label: '创建时间',
            prop: 'createTime',
            display: false,
          },
          {
            label: '字典备注',
            prop: 'note',
            type: 'textarea',
            span: 24,
          },
        ],
      },
      data: [],

      /* 字典配置弹窗 */
      box: false,
      diaLoading: false,
      diaForm: {},
      diaPage: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      dictTitle: '字典配置',
      diaData: [],
      diaOption: {
        searchShow: true,
        searchLabelWidth: '20%',
        searchSpan: 8,
        searchMenuSpan: 4,
        border: true,
        index: true,
        indexLabel: '序号',
        indexWidth: 100,
        selection: true,
        menuWidth: 300,
        column: [
          {
            label: '字典编号',
            prop: 'ruleDictCode',
            disabled: true,
          },
          {
            label: '实体属性',
            prop: 'ruleFieldName',
            search: true,
          },
          {
            label: '实体字段',
            prop: 'ruleFieldAttr',
            search: true,
          },
          {
            label: '系列排序',
            prop: 'ruleFieldOrder',
            type: 'number',
            value: 0,
            width: 80,
          },
          {
            label: '属性类型',
            prop: 'ruleFieldAttrType',
            type: 'select',
            dicData: [],
          },
          {
            label: '备注',
            prop: 'note',
          },
        ],
      },
    }
  },
  methods: {
    rowSave(row, done, loading) {
      delete row.createTime
      addRule(row).then(
        (data) => {
          if (data.status) {
            done()
            this.onLoad(this.page)
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
          } else {
            this.$message.error(data.msg)
            loading()
          }
        },
        (error) => {
          window.console.log(error)
          loading()
        }
      )
    },
    /* 打开字典属性弹窗 */
    async beforeOpen(done, type) {
      if (['add', 'edit'].includes(type)) {
        /* 查询prop: ruleFieldAttrType在array下标 */
        let i = this.findArray(
          this.diaOption.column,
          'ruleFieldAttrType',
          'prop'
        )
        if (i > -1) {
          /* 获取用户类型下拉 */
          const data = await this.$store.dispatch('asyncApi/getDict', {
            code: 'SJLX',
          })
          this.diaOption.column[i].dicData = data
        }
      }
      done()
    },
    rowDiaSave(row, done, loading) {
      addRField(row).then(
        (data) => {
          loading()
          if (data.status) {
            done()
            this.onDiaLoad()
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
          } else {
            this.$message.error(data.msg)
            loading()
          }
        },
        (error) => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowUpdate(row, index, done, loading) {
      delete row.createTime
      delete row.updateTime
      upRule(row).then(
        (data) => {
          if (data.status) {
            done()
            this.onLoad(this.page)
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
          } else {
            this.$message.error(data.msg)
            loading()
          }
        },
        (error) => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowDiaUpdate(row, index, done, loading) {
      delete row.createdTime
      delete row.updateTime
      upRField(row).then(
        (data) => {
          if (data.status) {
            done()
            this.onDiaLoad()
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
          } else {
            this.$message.error(data.msg)
            loading()
          }
        },
        (error) => {
          window.console.log(error)
          loading()
        }
      )
    },
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        delRule({
          id: row.id,
        }).then((data) => {
          if (data.status) {
            this.onLoad(this.page)
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    rowDiaDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        delRField({
          id: row.id,
        }).then((data) => {
          if (data.status) {
            this.onDiaLoad()
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    /* 字典配置 */
    dictEdit(row) {
      this.dictTitle = '[' + row.ruleDictName + ']字典配置'
      /* 赋值到diaPage code 用于刷新页面参数 */
      this.diaPage.code = row.ruleDictCode
      /* 查询prop: dictCode在array下标 */
      let i = this.findArray(this.diaOption.column, 'ruleDictCode', 'prop')
      if (i > -1) {
        this.diaOption.column[i].value = row.ruleDictCode
      }
      this.box = true
    },
    searchReset() {
      this.query = {}
      this.onLoad(this.page)
    },
    searchChange(params, done) {
      this.query = params
      this.page.currentPage = 1
      this.onLoad(this.page, params)
      done()
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    onLoad(page, params = {}) {
      params = {
        page: page.currentPage,
        size: page.pageSize,
      }
      this.loading = true
      getRule(params).then((data) => {
        if (data.status) {
          this.loading = false
          this.data = data.data.records
          this.page.total = data.data.total
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    /* dialog弹窗打开初始化字段列表 */
    onDiaLoad() {
      let form = {
        page: this.diaPage.currentPage,
        size: this.diaPage.pageSize,
        code: this.diaPage.code,
      }
      this.diaLoading = true
      getRField(form).then((data) => {
        if (data.status) {
          this.diaLoading = false
          this.diaData = data.data.records
          this.diaPage.total = data.data.total
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>

<style>
</style>
